<template>
	<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" inline>
		<el-row :gutter="20">
			<el-col :span="11">
				<el-form-item prop="minValue" style="width: 100%">
					<el-input-number
						:controls="false"
						:min="+leftMin"
						:max="+leftMax"
						@change="handleChange"
						v-model="ruleForm.minValue"
						placeholder="请输入最小值"
					></el-input-number>
				</el-form-item>
			</el-col>
			<el-col :span="2">
				<el-form-item>
					<span>~</span>
				</el-form-item>
			</el-col>
			<el-col :span="11">
				<el-form-item prop="maxValue" style="width: 100%">
					<el-input-number
						:controls="false"
						@change="handleChange"
						:min="+rightMin"
						:max="+rightMax"
						v-model="ruleForm.maxValue"
						placeholder="请输入最大值"
					/>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import type { FormRules } from 'element-plus'
type Props = {
	modelValue?: string | Object[]
	dataType?: string
	leftMin?: number|string
	leftMax?: number|string
	rightMax?: number|string
	rightMin?: number|string
	isInter?: boolean
  separator?: string
  noRules?:boolean
}
const props = withDefaults(defineProps<Props>(), {
	dataType: 'string',
	leftMin: 0,
	leftMax: 100000000,
	rightMin: 0,
	rightMax: 100000000,
	isInter: false,
	separator:',',
	noRules:false
})

const ruleForm: any = ref({
	minValue: null,
	maxValue: null,
})
const emit = defineEmits(['update:modelValue'])
const ruleFormRef = ref(null)

const handleChange = () => {
	ruleFormRef.value.validate((valid, val) => {
		if (valid) {
			let data = [ruleForm.value.minValue, ruleForm.value.maxValue].sort((a,b)=>a-b)
			let value

			if (!ruleForm.value.maxValue) {
				value = props.dataType == 'string' ? data.filter(Boolean).join(props.separator) : data.filter(Boolean)
			} else {
				value = props.dataType == 'string' ? data.join(props.separator) : data
			}
			emit('update:modelValue', value)
		}
	})
}

const validateMinValue = (rule: any, value: any, callback: any) => {
	if (!ruleForm.value.maxValue || Number(ruleForm.value.maxValue) > Number(value)) {
		callback()
	} else if (ruleForm.value.minValue == '') {
		callback(new Error('请输入最小值'))
	} else {
		callback(new Error('最小值不能大于最大值'))
	}
}
const validateMaxValue = (rule: any, value: any, callback: any) => {
	if (!ruleForm.value.minValue || Number(ruleForm.value.minValue) < Number(value)) {
		callback()
	} else if (ruleForm.value.maxValue == '') {
		callback(new Error('请输入最大值'))
	} else {
		callback(new Error('最大值不能小于最小值'))
	}
}
let rules = ref<FormRules>({
	minValue: [{ required: true, validator: validateMinValue, trigger: 'blur' }],
	maxValue: [{ required: true, validator: validateMaxValue, trigger: 'blur' }],
})
if(props.noRules){
	rules.value = {}
}

watch(
	() => props.modelValue,
	(val, oval) => {
		if (!val) {
			ruleForm.value.minValue = null
			ruleForm.value.maxValue = null
		}
		if (!oval) {
			let dataValue = []
			if (typeof val == 'string') {
				dataValue = val.split(props.separator)
			} else if (Array.isArray(val)) {
				dataValue = val
			}
			ruleForm.value.minValue = +dataValue[0]
			ruleForm.value.maxValue = +dataValue[1]
		}
	},
	{
		immediate: true,
	}
)
</script>

<style scoped></style>
